{extend name="base" /}
{block name="title"}邀请记录{/block}
{block name="head"}{/block}
{block name="body"}

<div class="weui_panel ms-controller" ms-controller="invite">
  <div class="weui_panel_hd">
    <div class="weui-flex">
      <div class="weui-flex-item">总: {{@total|number(0,'','')}}</div>
      <div class="weui-flex-item">月: {{@TotalMonth|number(0,'','')}}</div>
      <div class="weui-flex-item">周: {{@TotalWeek|number(0,'','')}}</div>
      <div class="weui-flex-item">日: {{@TotalToday|number(0,'','')}}</div>
    </div>
  </div>
  <div class="weui_panel_bd">
    <table class="weui-table" >
      <thead>
        <tr><th>#</th><th>GameID</th><th>昵称</th><th>时间</th></tr>
      </thead>
      <tbody>
        <tr ms-if="@rows.length<=0"><td colspan="4">Oh~暂无数据!</td></tr>
        <tr ms-if="@rows.length>0" ms-for="(k,v) in @rows">
          <td>{{v.ROW_NUMBER}}</td>
          <td>{{v.GameID}}</td>
          <td>{{v.NickName|truncate(8)}}</td>
          <td>{{v.BindTime|date('MM/dd HH:mm')}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>
</div>

{/block}
{block name="foot"}
<script>

avalon.ready(function () {

  var vm = avalon.define({
    $id: "invite",
    page: "{$page??1}" * 1,
    size: "{$size??10}" * 1,
    total: "{$total??0}" * 1,
    TotalMonth: "{$info.Month??0}" * 1,
    TotalToday: "{$info.Today??0}" * 1,
    TotalWeek: "{$info.Week??0}" * 1,
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      $.req({
        type: 'POST',
        url: "{:url('invite')}",
        data: {
          auid: "{$auid|default=0}",
          page: page
        },
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            vm.page = resp.data.page * 1;
            vm.size = resp.data.size * 1;
            vm.total = resp.data.total * 1;
            vm.TotalMonth = resp.data.info.Month * 1;
            vm.TotalToday = resp.data.info.Today * 1;
            vm.TotalWeek = resp.data.info.Week * 1;
            vm.rows.removeAll();
            vm.rows.pushArray(resp.data.rows);
          }
        }
      });
    },
    tapFirst: function () {
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      this.ajaxPage(this.totalPage);
      return false;
    }
  });
  avalon.scan(document.body);
});
</script>
{/block}